<template>
  <div class="detailDialog">
    <el-dialog
      :before-close="handClose"
      center
      width="50%"
      :title="title"
      :visible="off"
      append-to-body
    >
      <div id="printContent">
        <slot name="form">
          <el-form
            label-position="left"
            :model="dialogConfig.formConfig.formData"
            ref="ruleForm"
            label-width="100px"
            size="mini"
            class="demo-ruleForm"
          >
            <el-form-item :class="[item.bottomBorder == true ? item.bottomStyle : '']" :label="item.label" v-for="(item, index) in dialogConfig.formConfig.fieldConfig" :key="index">
              <span>{{dialogConfig.formConfig.formData[item.value]}}</span>
            </el-form-item>
          </el-form>
        </slot>
        <slot name="table">
          <el-table v-if="dialogConfig.tableConfig.isHaveTable" :data="dialogConfig.tableConfig.tableData" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="200" align="center" :index="indexSort"></el-table-column>
            <el-table-column
              :key="index"
              v-for="(item,index) in dialogConfig.tableConfig.columnConfig"
              :prop="item.value"
              :label="item.label"
            ></el-table-column>
          </el-table>
        </slot>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">取消</el-button>
        <el-button v-print="'#printContent'" type="primary">打印</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "detailDialog",
  props: {
    title: { type: String },
    off: { type: Boolean },
    dialogConfig: { type: Object },
  },
  watch: {
    off(val){
      if(val){
         console.log("this.dialogConfig", this.dialogConfig);
      }
    }
  },
  data() {
    return {};
  },
  created() {
    console.log("this.dialogConfig", this.dialogConfig);
  },
  methods: {
    handClose() {
      this.$emit("close");
    },
    cancel() {
      this.handClose();
    },
    indexSort(index) {
      return ++index;
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.bottomStyle{
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
</style>